<%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put } do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  <%= f.hidden_field :invitation_token %>

  <% if f.object.class.require_password_on_accepting %>
    <%= react_component 'Input', props: {
      type: 'text',
      name: 'user[name]',
      id: 'user_name',
      label: t('common.name'),
      autoComplete: 'off',
      light: true,
      required: true
    } %>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'location',
        googleAPIKey: ENV['GOOGLE_API_KEY'],
        id: 'user_location',
        name: 'user[location]',
        label: t('common.form.location'),
        light: true
      } %>
    </div>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'password',
        name: 'user[password]',
        id: 'user_password',
        label: t('devise.password'),
        light: true,
        required: true
      } %>
    </div>

    <div class="smallMarginTop">
      <%= react_component 'Input', props: {
        type: 'password',
        name: 'user[password_confirmation]',
        id: 'user_password_confirmation',
        label: t('devise.registrations.placeholders.repeat_password'),
        light: true,
        required: true
      } %>
    </div>
  <% end %>

  <%= f.submit t("devise.invitations.edit.submit_button"), class: 'buttonGhostM marginTop' %>
<% end %>

<div class="oAuthLinks">
  <div class="smallMarginTop">
    <%= react_component 'OAuthButton', props: {
      type: 'google',
      signIn: false,
      action: omniauth_authorize_path(resource_name, :google_oauth2, invitation_token: resource.invitation_token),
      token: form_authenticity_token
    } %>
  </div>

  <div class="smallMarginTop">
    <%= react_component 'OAuthButton', props: {
      type: 'facebook',
      signIn: false,
      action: omniauth_authorize_path(resource_name, :facebook, invitation_token: resource.invitation_token),
      token: form_authenticity_token
    } %>
  </div>
</div>
